<template>
  <div>
    <el-table :data="tableData" border stripe style="width: 100%">
      <el-table-column align="center" type="index" prop="date" label="序号" width="150"></el-table-column>
      <el-table-column align="center" prop="dicDesc" label="字典描述" width="120"></el-table-column>
      <el-table-column align="center" prop="dicKey" label="key值" width="120"></el-table-column>
      <el-table-column align="center" prop="dicOrder" label="字典排序" width="120"></el-table-column>
      <el-table-column align="center" prop="dicValue" label="value值" width="300"></el-table-column>
      <el-table-column align="center" prop="typeName" label="字典种类" width="120"></el-table-column>

      <el-table-column label="操作" fixed="right" width="100">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button type="text" size="small" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- <el-table :data="tableData" border stripe style="width: 100%">
        <el-table-column v-for="(item,index) in tableInfos" :key="index" align="center" :type="index" :prop="item.prop" label="item.label" width="150"></el-table-column>
    </el-table> -->
  </div>
</template>
<script>
export default {
  name: "tables",
  props: ["tableData","handleEdit","handleDelete"],
  data() {
    return {
      tableInfos: [
        { label: "字典描述", prop: "dicDesc" },
        { label: "key值", prop: "dicKey" },
        { label: "字典排序", prop: "dicOrder" },
        { label: "value值", prop: "dicValue" },
        { label: "字典种类", prop: "typeName" },
        { label: "操作", prop: "changeBtn" }
      ]
    };
  }
};
</script>